<template id='BottomBar'>
  <div
    class="BottomBar"
    :class="[{ isShow: isShowBottomBar }, { isHiden: !isShowBottomBar }]"
  >
    <div class="topPath">
      <div class="logoPath">
        <b-img :src="logoIcon" fluid alt="Responsive image"></b-img>
      </div>
      <div class="textItem" v-for="(item, index) in menuList" :key="index">
        <div class="itemHead">
          {{ item.title }}
        </div>
        <div
          class="itemContent"
          v-for="(item, index) in item.contentList"
          :key="index"
        >
          <span @click="linkTo(item)">{{ item.name }}</span>
        </div>
        <div
          class="itemContent"
          v-for="(item, index) in item.iconList"
          :key="index"
        >
          <b-img
            :src="item.icon"
            fluid
            alt="Responsive image"
            @click="linkTo(item)"
          ></b-img>
        </div>
      </div>
    </div>
    <div class="bottomPath">
      <div class="bottomPathText">Coyright © 2021 Gmatrixs</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BottomBar",
  components: {},
  data() {
    return {
      isShowBottomBar: false,
      logoIcon: require("../assets/images/bottomBar/logo.png"),
      menuList: [
        // {
        //   title: "Gmatrixs",
        //   contentList: [{ name: "Gmatrixs Group", path: "" }],
        // },
        {
          title: "Support",
          contentList: [
            {
              name: "Whitepaper",
              path: "http://gmatrixs.com/static/GmatrixsWhitePaper.pdf",
            },
            { name: "Litepaper", path: "" },
            { name: "FAQ", path: "" },
            { name: "Govemance", path: "" },
            // { name: "Contributors", path: "" },
            // { name: "Strategic Partners", path: "" },
          ],
        },
        // {
        //   title: "Team",
        //   contentList: [
        //     { name: "About", path: "https://market-gms.gitbook.io/gmatrixs/" },
        //     { name: "Join us", path: "" },
        //   ],
        // },
        {
          title: "Follow us",
          iconList: [
            {
              icon: require("../assets/images/bottomBar/twitter.png"),
              path: "https://twitter.com/Gmatrixs1",
            },
            {
              icon: require("../assets/images/bottomBar/message.png"),
              path: "https://discord.com/invite/7277cV8XmH",
            },
            {
              icon: require("../assets/images/bottomBar/plane.png"),
              path: "https://t.me/gmatrixsofficial",
            },
          ],
        },
        {
          title: "Developers",
          iconList: [
            {
              icon: require("../assets/images/bottomBar/gitHub.png"),
              path: "https://github.com/Gmatrixs-inc/",
            },
            {
              icon: require("../assets/images/bottomBar/gitBook.jpg"),
              path: "https://market-gms.gitbook.io/gmatrixs/",
            },
          ],
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    goTo(item) {
      if (item.path) {
        this.$router.push(item.path);
      }
    },
    linkTo(item) {
      if (item.path) {
        window.open(item.path, "_blank");
        // window.location.href = item.path;
      }
    },
    bottomScroll(e) {
      let scrollTop = "";
      let windowHeight = "";
      let scrollHeight = "";
      let surplusHeight = "";
      if (!e) {
        scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        if (windowHeight >= scrollHeight) {
          this.isShowBottomBar = true;
        }
      } else {
        scrollTop = e.target.scrollTop;
        windowHeight = e.target.clientHeight;
        scrollHeight = e.target.scrollHeight;
        surplusHeight = scrollHeight - (scrollTop + windowHeight);
        if (surplusHeight <= Math.ceil((scrollHeight / 8193) * 450)) {
          this.isShowBottomBar = true;
        } else {
          this.isShowBottomBar = false;
        }
      }
    },
  },
  created() {},
  mounted() {
    this.bottomScroll();
    window.addEventListener("scroll", this.bottomScroll, true);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {
    window.removeEventListener("scroll", this.bottomScroll, true);
  },
  activated() {},
};
</script>

<style lang='less' scoped>
.BottomBar {
  // height: 626px;
  background: #000000;
  position: relative;
  user-select: none;
  .topPath {
    padding: 0 244px;
    padding-top: 90px;
    padding-bottom: 141px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 16px;
    .logoPath {
      flex: 1;
      img {
        width: 159px;
        height: 55px;
      }
    }
    .textItem {
      flex: 1;
      .itemHead {
        color: #ffffff;
      }
      .itemContent {
        color: rgba(255, 255, 255, 0.7);
        margin-top: 28px;
        span {
          cursor: pointer;
          display: block;
          width: fit-content;
        }
        img {
          cursor: pointer;
          width: 27px;
          height: 27px;
        }
        span:hover,
        img:hover {
          color: #ffffff;
          // -webkit-animation: focus-in-contract 0.7s
          //   cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
          // animation: focus-in-contract 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
          //   both;
          @-webkit-keyframes focus-in-contract {
            0% {
              letter-spacing: 1em;
              -webkit-filter: blur(12px);
              filter: blur(12px);
              opacity: 0;
            }
            100% {
              -webkit-filter: blur(0px);
              filter: blur(0px);
              opacity: 1;
            }
          }
          @keyframes focus-in-contract {
            0% {
              letter-spacing: 3px;
              -webkit-filter: blur(12px);
              filter: blur(12px);
              opacity: 0;
            }
            100% {
              -webkit-filter: blur(0px);
              filter: blur(0px);
              opacity: 1;
            }
          }
        }
      }
    }
    .textItem:last-child {
      .itemContent:nth-child(3) {
        img {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
  .bottomPath {
    height: 90px;
    background: #438dee;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .bottomPathText {
      font-size: 20px;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
.isShow {
  -webkit-animation: bottom-show 1s cubic-bezier(0.75, 0.46, 0.45, 0.94) both;
  animation: bottom-show 1s cubic-bezier(0.75, 0.46, 0.45, 0.94) both;
  @-webkit-keyframes bottom-show {
    0% {
      -webkit-transform: translateZ(600px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
      opacity: 1;
    }
  }
  @keyframes bottom-show {
    0% {
      -webkit-transform: translateZ(600px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
      opacity: 1;
    }
  }
}
.isHiden {
  -webkit-animation: bottom-hiden 1s cubic-bezier(0.75, 0.46, 0.45, 0.94) both;
  animation: bottom-hiden 1s cubic-bezier(0.75, 0.46, 0.45, 0.94) both;
  @-webkit-keyframes bottom-hiden {
    0% {
      -webkit-transform: translateZ(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(600px);
      opacity: 0;
    }
  }
  @keyframes bottom-hiden {
    0% {
      -webkit-transform: translateZ(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(600px);
      opacity: 0;
    }
  }
}
@media screen and (max-width: 480px) {
  .BottomBar {
    .topPath {
      padding: 40px;
      .logoPath {
        margin-right: 20px;
      }
      .textItem {
        .itemHead {
          font-size: 26px;
        }
        .itemContent {
          margin-top: 38px;
          font-size: 26px;
        }
      }
    }
    .bottomPath {
      .bottomPathText {
        font-size: 25px !important;
      }
    }
  }
}
</style>